<script>
import { layout } from '@/mixins/layout'
import { officeHall } from '@/mixins/officeHall'
import { getTimes } from '@/utils/utils'

export default {
  name: 'OfficeHallV5',
  mixins: [layout, officeHall],
  data() {
    return {
      date: ''
    }
  },
  created() {
    const times = getTimes()
    this.date = times.date
  }
}
</script>

<template>
  <div class="server-body" :style="borderStyle">
    <div class="server-header" :style="customBorderStyle">
      <div class="header-title-left">
        <span class="title">我要办</span>
        <span class="line">截止 {{ date }} </span>
        <span class="line">共上线 </span>
        <span class="read">{{ size }}</span>
        <span class="line"> 项服务</span>
      </div>
      <div class="header-title-right">
        <div class="header-button" @click="changerAsc">
          <div class="header-button-label">服务热度</div>
          <div class="header-button-line">
            <span v-if="query.hot===1" class="active">
              <i class="el-icon-caret-top" />
            </span>
            <span v-else>
              <i class="el-icon-caret-top" />
            </span>
            <span v-if="query.hot===2" class="active">
              <i class="el-icon-caret-bottom" />
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" />
            </span>
          </div>
        </div>
        <div class="header-button" @click="changerSc">
          <div class="header-button-label">收藏次数</div>
          <div class="header-button-line">
            <span v-if="query.sc===1" class="active">
              <i class="el-icon-caret-top" />
            </span>
            <span v-else>
              <i class="el-icon-caret-top" />
            </span>
            <span v-if="query.sc===2" class="active">
              <i class="el-icon-caret-bottom" />
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" />
            </span>
          </div>
        </div>
        <div class="header-button" @click="changerpj">
          <div class="header-button-label">评价高低</div>
          <div class="header-button-line">
            <span v-if="query.pj===1" class="active">
              <i class="el-icon-caret-top" />
            </span>
            <span v-else>
              <i class="el-icon-caret-top" />
            </span>
            <span v-if="query.pj===2" class="active">
              <i class="el-icon-caret-bottom" />
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" />
            </span>
          </div>
        </div>
        <div class="header-button" @click="changerZm">
          <div class="header-button-label">服务名称首字母</div>
          <div class="header-button-line">
            <span v-if="query.zm===1" class="active">
              <i class="el-icon-caret-top" />
            </span>
            <span v-else>
              <i class="el-icon-caret-top" />
            </span>
            <span v-if="query.zm===2" class="active">
              <i class="el-icon-caret-bottom" />
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" />
            </span>
          </div>
        </div>
        <div class="header-search">
          <el-input v-model="query.blurry" placeholder="请输入内容" class="input-with-select">
            <el-select slot="prepend" v-model="query.type" style="width: 100px" placeholder="请选择">
              <el-option label="服务名称" :value="1" />
              <el-option label="办理地点" :value="2" />
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="queryObject" />
          </el-input>
        </div>
      </div>
    </div>
    <div class="server-content">
      <div class="content-left">
        <div class="content-body">
          <div class="content-header" style="color: #fff">
            <div class="image"><i class="el-icon-s-operation" /></div>
            <div class="title">{{ activeHeader.label }}</div>
          </div>
          <div
            :class="query.params === null ? 'active': ''"
            class="content-ul-li"
            @click="itemClick(null)"
          >
            <div class="image">
              <i class="el-icon-menu" />
            </div>
            <div class="title">全部服务</div>
          </div>
          <div
            v-for="(item,index) in params"
            :key="'code-'+index"
            :class="query.params === item.value ? 'active': ''"
            class="content-ul-li"
            @click="itemClick(item.value)"
          >
            <div v-if="item.icon" class="image">
              <el-image :src="'https://portal2dev.apexedu.com.cn'+item.icon" style="width: 28px;height: 28px;margin-top: 11px" />
            </div>
            <div v-else class="image">
              <i class="el-icon-location" />
            </div>
            <div class="title">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="content-body" style="background-color: #fff;display: flex;flex-flow: column nowrap">
          <div class="content-body-header">
            <div
              v-for="(item,index) in queryList"
              :key="'header-'+index"
              class="body-item-li"
              :class="activeHeader.column === item.column ? 'active':''"
              @click="headerClick(item)"
            >{{ item.label }}</div>
          </div>
          <div class="content-body-a">
            <div class="content-body-table-header">
              <div class="table-header-td-image">图标</div>
              <div class="table-header-td-title">服务名称</div>
              <div class="table-header-td-bm">归属部门</div>
              <div class="table-header-td-bm">办理地点</div>
              <div class="table-header-tr-sc">是否收藏</div>
              <div class="table-header-tr-button" style="text-align: center">操作</div>
            </div>
            <div v-for="(item,index) in dataList" :key="'li-'+index" class="content-body-ul-li">
              <div class="table-header-td-image">
                <el-image :src="item.pcIcon" />
              </div>
              <div class="table-header-td-title">{{ item.name }}</div>
              <div class="table-header-td-bm">{{ item.zgbmmc }}</div>
              <div class="table-header-td-bm">{{ item.bldd }}</div>
              <div class="table-header-td-sc">
                <el-button v-if="item.sfsc" disabled type="primary" size="mini" icon="el-icon-plus" circle />
                <el-button v-else type="primary" size="mini" icon="el-icon-plus" circle @click="scfw(item)" />
              </div>
              <div class="table-header-td-button">
                <div class="button-span" @click="openFaq(item)">办事指南</div>
                <div class="button-span-li" @click="openEntity(item)">立即办理</div>
              </div>
            </div>
          </div>
          <div class="content-body-bottom">
            <el-pagination
              :current-page="query.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagerSize"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.server-body {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  .server-header {
    height: 80px;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    .header-title-left {
      height: 80px;
      line-height: 80px;
      .title {
        font-size: 1.4rem;
        color: var(--font-color);
        font-weight: bold;
      }
      .line {
        color: var(--font-assets-color);
        font-size: 0.8rem;
      }
      .read {
        color: #f56c6c;
        font-size: 0.8rem;
      }
    }
    .header-title-right {
      height: 80px;
      line-height: 80px;
      display: flex;
      flex-flow: row nowrap;
      .header-button {
        // width: 90px;
        margin-right: 20px;
        font-size: 0.9rem;
        cursor: pointer;
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        .header-button-label {
          // width: 60px;
          height: 80px;
          line-height: 85px;
        }
        .header-button-line {
          width: 30px;
          height: 16px;
          margin-top: 32px;
          span{
            width: 100%;
            text-align: center;
            line-height: 8px;
            height: 8px;
            display: block;
          }
          span.active {
            color: var(--active-color);
          }
        }
      }
    }
  }
  .server-content {
    flex: 1 1;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    .content-left {
      width: 280px;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
    .content-right {
      flex: 1 1;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}
.content-body {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #f6f8fa;
}
.content-header {
  width: 100%;
  height: 50px;
  text-align: center;
  background-color: #276eed;
  line-height: 50px;
  color: #ffffff;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  font-size: 1.1rem;
  display: flex;
  flex-flow: row nowrap;
  .image {
    width: 60px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .title {
    flex: 1 1;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
.content-ul-li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 2px;
  display: flex;
  flex-flow: row nowrap;
  .image {
    width: 60px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .title {
    flex: 1 1;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
.content-ul-li.active {
  background-color: #ecf8ff;
}
.content-body-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  flex-flow: row nowrap;
  border-bottom: 2px solid #e5e5e5;
  .body-item-li {
    width: 120px;
    padding: 0 5px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    line-height: 50px;
    height: 50px;
    font-weight: bold;
    cursor: pointer;
  }
  .body-item-li.active, .body-item-li:hover {
    color: #276eed;
    border-bottom: 2px solid #276EED;
  }
}
.content-body-a {
  width: 100%;
  flex: 1 1;
}
.content-body-bottom {
  height: 50px;
  width: 100%;
}
.content-body-ul-li {
  width: 100%;
  height: 50px;
  display: flex;
  flex-flow: row nowrap;
  font-size: 0.9rem;
  padding: 0 10px;
  box-sizing: border-box;
  line-height: 50px;
  border-bottom: 1px solid #f6f8fa;
}
.content-body-table-header {
  width: 100%;
  height: 40px;
  margin-top: 15px;
  background-color: #f6f8fa;
  line-height: 40px;
  display: flex;
  flex-flow: row nowrap;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0 10px;
  box-sizing: border-box;
}
.table-header-td-image {
  width: 50px;
  text-align: center;
  height: 100%;
  .el-image {
    width: 32px;
    height: 32px;
    margin-top: 9px;
  }
}
.table-header-td-title {
  flex: 1 1;
  height: 100%;
  text-align: left;
}
.table-header-td-bm {
  width: 180px;
  height: 100%;
  text-align: left;
}
.table-header-tr-sc {
  width: 60px;
  height: 100%;
  text-align: center;
}
.table-header-td-sc {
  width: 60px;
  height: 100%;
  text-align: center;
}
.table-header-tr-button {
  width: 180px;
  text-align: center;
  height: 100%;
}
.table-header-td-button {
  width: 180px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
}
.button-span {
  width: 80px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #276eed;
  text-align: center;
  line-height: 30px;
  font-size: 0.7rem;
  margin-top: 10px;
  cursor: pointer;
}
.button-span-li {
  width: 80px;
  margin-left: 10px;
  height: 30px;
  border-radius: 15px;
  background-color: #276eed;
  text-align: center;
  line-height: 30px;
  font-size: 0.8rem;
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
}
</style>
